<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="弹出层" />
		<title></title>
		<link rel="stylesheet" href="CSS/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="CSS/demo.css" />
		<link rel="stylesheet" href="CSS/hwLayer1.css">
		<link rel="stylesheet" href="CSS/pick-pcc.min.1.0.1.css">
		<link rel="stylesheet" href="CSS/修改.css" type="text/css">
        <script src="JS/jquery-3.1.0.js"></script>
		<style>
			.title1 {
				margin-left: 200px;
				font-size: 20px;
				font-weight: bold;
			}
			
			.txt1 {
				width: 120px;
				height: 40px;
				font-size: 17px;
				text-align: left;
			}
			
			.textarea1 {
				width: 450px;
				height: 70px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			.input1 {
				width: 330px;
				height: 40px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			table {
				width: 800px;
			}
			
			.savebtn {
				background-color: #CA141D;
				font-size: 20px;
				color: white;
				width: 172px;
				height: 46px;
				margin-left: 30px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			.cancelbtn1 {
				font-size: 20px;
				width: 172px;
				height: 46px;
				margin-left: 20px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			.btnDiv {
				width: 500px;
			}
		</style>
		<title>账号安全</title>
		<link href="CSS/Account_security .css" rel="stylesheet" type="text/css"/>
		<script >
			function setWidth(){
				var h = document.body.clientWidth;
				document.getElementById("container").style.width=h+"px";
			}
 </script>
	</head>
	<body onload="setWidth()" bgcolor="#f5f5f5">
		<div id="container">
		  <div class="Account_security">
		  	 <div class="Account_security_logo">
		  	 	<div class="Account_security_photo">
		  	 		<img src="img/n-logo.png" />
		  	 	</div>
		  	 	<div class="Account_security_exit">
		  	 		<p class="Account_security_exit_font">退出</p>
		  	 	</div>
		  	 </div>
		  	 <div class=Account_security_title>
		  	 	<ul >
		  	 		<li class="Account_security_title_li"><a href="Account_security.jsp" class="Account_security_title_li_a" title="账号安全">账号安全</a></li>
		  	 		<li class="Account_security_title_li"><a href="PersonNews.jsp" class="Account_security_title_li_a" title="个人信息">个人信息</a></li>
		  	 		<li class="Account_security_title_li"><a href="#" class="Account_security_title_li_a" title="绑定授权">绑定授权</a></li>
		  	 		<li class="Account_security_title_li"><a href="#" class="Account_security_title_li_a" title="小米服务">小米服务</a></li>
		  	 		<li class="Account_security_title_li"><a href="#" class="Account_security_title_li_a" title="设备管理">设备管理</a></li>
		  	 	</ul>
		  	 	<div class="Account_security_title_p">
		  	 		<p class="Account_security_title_P_font">请设置名字</p>
		  	 	</div>
		  	 	<div class="Account_security_title_p1">
		  	 		<p class="Account_security_title_p1_font">2279902253</p>
		  	 	</div>
		  	 </div>
		  	 <div class="Account_security_content">
		  	 	<div class="Account_security_content_photo">
		  	 		<p class="Account_security_content_img"></p>
		  	 	</div>
		  	 	<div class="Account_security_content1">
		  	 		<div class="Account_security_content1_wenzi">
		  	 			<p>安全等级</p>
		  	 		</div>
		  	 		<div class="Account_security_content1_wenzi1">
		  	 			<p>40&nbsp;<span class="Account_security_content1_wenzi2">分</span></p>
		  	 		</div>
		  	 		<div class="Account_security_content1_Gundong">
		  	 		    <div class="Account_security_content1_Gundong1"></div>
		  	 		 <div class="Account_security_content1_Gundong2">
		  	 		     <div class="Account_security_content1_Gundong3"></div>
		  	 		  </div>
		  	 		  <div class="Account_security_content1_Gundong4"></div>
		  	 		    <div class="Account_security_content1_wenzi3">
		  	 		  	    <p class="Account_security_content1_wenzi4">存在<span class="Account_security_content1_wenzi5">2</span>个风险</p>
		  	 		  </div>
		  	 		</div>
		  	 	 </div>
		  	 	  <hr style="width: 890px; margin-top: 5px; color: #f5f5f5; margin-left: 30px;"/>
		  	 	 <div class="Account_security_content2">
		  	 	 	<div class="Account_security_content2_img">
		  	 	 		<img src="img/1.PNG" width="39px" height="39px"/>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content2_wenzi">
		  	 	 		<p>账号密码</p>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content2_wenzi1">
		  	 	 		<p>用于保护帐号信息和登录安全</p>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content2_btn">
		  	 	 		<p class="Account_security_content2_wenzi2"><a class="show-layer" data-show-layer="hw-layer" role="button" style="color: #333333; text-decoration: none;">修改</a></p>
		  	 	 	</div>
		  	 	 </div>
		  	 	 <hr style="width: 890px; margin-top: 10px; color: #f5f5f5; margin-left: 30px;"/>
		  	 	 
		  	 	 <div class="Account_security_content3">
                    <div class="Account_security_content3_img">
		  	 	 		<img src="img/2.PNG" width="39px" height="39px"/>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content3_wenzi">
		  	 	 		<p >安全邮箱</p>	
		  	 	   </div>
		  	 	   <div class="Account_security_content3_wenzi1">
		  	 	 		<p>安全邮箱将可用于登录小米帐号和重置密码，建议立即设置</p>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content3_btn">
		  	 	 		<p class="Account_security_content3_wenzi2">绑定</p>
		  	 	 	</div>
		  	 	 </div>
		  	 	 <hr style="width: 890px; margin-top: 10px; color: #f5f5f5; margin-left: 30px;"/>
		  	 	 
		  	 	  <div class="Account_security_content4">
                    <div class="Account_security_content4_img">
		  	 	 		<img src="img/3.PNG" width="39px" height="39px"/>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content4_wenzi">
		  	 	 		<p >安全手机 182******17</p>	
		  	 	   </div>
		  	 	   <div class="Account_security_content4_wenzi1">
		  	 	 		<p>安全手机可以用于登录小米帐号，重置密码或其他安全验证</p>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content4_btn">
		  	 	 		<p class="Account_security_content4_wenzi2">修改</p>
		  	 	 	</div>
		  	 	 </div>
		  	 	 <hr style="width: 890px; margin-top: 10px; color: #f5f5f5; margin-left: 30px;"/>
		  	     
		  	     <div class="Account_security_content3">
                    <div class="Account_security_content3_img">
		  	 	 		<img src="img/4.PNG" width="39px" height="39px"/>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content3_wenzi">
		  	 	 		<p >密保问题</p>	
		  	 	   </div>
		  	 	   <div class="Account_security_content3_wenzi1">
		  	 	 		<p>密保问题用于安全验证，建议立即设置</p>
		  	 	 	</div>
		  	 	 	<div class="Account_security_content3_btn">
		  	 	 		<p class="Account_security_content3_wenzi2">设置</p>
		  	 	 	</div>
		  	 	 </div>
		  	 </div>
		  	 <div class="Account_security_foot">
		  	 	<ul>
		  	 		<li class="Account_security_foot_li">简体&nbsp;&nbsp;|</li>
		  	 		<li class="Account_security_foot_li">繁体&nbsp;&nbsp;|</li>
		  	 		<li class="Account_security_foot_li">English&nbsp;&nbsp;|</li>
		  	 		<li class="Account_security_foot_li">常见问题</li>
		  	 	</ul>
		  	 </div>
		  	 <div class="Account_security_foot1">
		  	 	<p class="Account_security_foot1_wenzi">小米公司版权所有-京ICP备10046444-<img src="img/ghs.png"/>
		  	 		京公网安备11010802020134号-京ICP证110507号</p>
		  	 </div>
           </div>
           
		</div>
		
		
		<div class="container">
            <div class="optlist">
		    </div>

			<div class="hw-overlay" id="hw-layer">
				<div class="hw-layer-wrap">
					<button type="button" class="close hwLayer-close"></button>
					
					<div class="row">
                    	<div class="col-md-9 col-sm-12">
                    		<Button class="bianji_exit" >X</Button>
                    		<div class="bianji_content">
                    		<p class="bianji_content_wenzi">修改密码
                    		</p>
                    	</div>
                    		<p class="bianji_content1"></p>
                    	<div class="xiugai_wenzhi">
                    		<p class="xiugai_wenzhi1">原密码</p>
                    	</div>
                    <input type="text" class="xiugai_input" style="outline: none;" id="password1" placeholder="&nbsp;&nbsp;输入原密码"  />
                    <span class="passwordtishi" id="tishi"></span>
                    	<div class="xiugai_wenzhi2">
                    		<p class="xiugai_wenzhi1">新密码</p>
                    	</div>
                    	<input type="text" class="xiugai_input"  style="outline: none;" id="password2" placeholder="&nbsp;&nbsp;输入新密码"/>
                    	<input type="text" class="xiugai_input"  style="margin-top: 5px; outline: none;" id="password3" placeholder="&nbsp;&nbsp;重复新密码" />
                    	<p class="xiugai_wenzhi3">密码长度8~16位，数字、字母、字符至少包含两种</p>
                    	<span class="passwordtishi1" id="tishi"></span>
                    	<span class="passwordtishi2" id="tishi"></span>
                    	<div class="xiugai_queding" id="true" >
                    		<p style="color:#FFFFFF;margin-top:5px; margin-left: 50px;">确定</p>
                    	</div>
                    	<div class="xiugai_exit">
                    		<p style="font-size: 14px;margin-top:5px; margin-left: 50px;">取消</p>
                    	</div>
				</div>
				</div>
				</div>
				</div>
				</div>

				<script type="text/javascript" src="JS/xiugai.js"></script>
				<script type="text/javascript" src="JS/pick-pcc.min.1.0.1.js"></script>
				<script>
					$(function() {
						//展示层
						function showLayer(id) {
							var layer = $('#' + id),
								layerwrap = layer.find('.hw-layer-wrap');
							layer.fadeIn();
							//屏幕居中
							layerwrap.css({
								'margin-top': -layerwrap.outerHeight() / 2
							});
						}

						//隐藏层
						function hideLayer() {
							$('.hw-overlay').fadeOut();
						}

						$('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() {
							hideLayer();
						});

						//触发弹出层
						$('.show-layer').on('click', function() {
							var layerid = $(this).data('show-layer');
							showLayer(layerid);
						});

						//点击或者触控弹出层外的半透明遮罩层，关闭弹出层
						$('.hw-overlay').on('click', function(event) {
							if(event.target == this) {
								hideLayer();
							}
						});

						//按ESC键关闭弹出层
						$(document).keyup(function(event) {
							if(event.keyCode == 27) {
								hideLayer();
							}
						});
						
						$(".bianji_exit").click(function(){
							
							$("#hw-layer").hide();
							$(".input").val("");
							
						});
					});

					$(".xiugai_exit").click(function(){
							$("#hw-layer").hide();
						});
				</script>
	</body>
</html>
    